<template>
  <div class="no-record flex flex-column align-center">
    <img
      src="@/assets/images/nothing.png"
      alt=""
      v-if="state.themeType || !useDark"
    />
    <img
      src="@/assets/images/nothing_dark.png"
      alt=""
      v-if="!state.themeType && useDark"
    />
    <div class="text-10 quotet3" v-if="type != 1">
      {{ $t("formTip.noData") }}
    </div>
  </div>
</template>
<script>
import { computed, onMounted, reactive, watch } from "vue";
import { useStore } from "vuex";
export default {
  name: "NoRecord",
  props: {
    useDark: { type: Boolean, default: false },
    type: Number
  },
  setup() {
    const $store = useStore();
    const state = reactive({
      themeType: null
    });
    const theme = computed(() => {
      return $store.state.exchange.theme;
    });
    watch(
      () => theme.value,
      val => {
        if (val === "night") {
          state.themeType = false;
        } else if (val === "day") {
          state.themeType = true;
        }
      }
    );
    onMounted(() => {
      state.themeType = $store.state.exchange.theme === "day" ? true : false;
    });
    return {
      state,
      theme
    };
  }
};
</script>
<style lang="less" scoped>
.no-record {
  margin: 0 auto;
  padding-top: 50px;
  img {
    width: 88px;
    height: 88px;
    display: block;
  }
}
</style>
